import React, { useState } from "react";

import * as echarts from "@/components/ec-canvas/echarts.js";
import { View } from "@tarojs/components";
import "./index.scss";

let chart = null;
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width,
    height,
    devicePixelRatio: dpr, // new
  });
  canvas.setChart(chart);

  const option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };

  chart.setOption(option);
  return chart;
}

export default () => {
  const [ec] = useState({ onInit: initChart });
  return (
    <View className="bar">
      <ec-canvas id="mychart-dom-area" canvas-id="mychart-line" ec={ec} />
      <ec-canvas id="mychart-dom-area" canvas-id="mychart-line" ec={ec} />
    </View>
  );
};
